var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.jsx',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js' // 通过 $entry 生成 path.join(path,filename)
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',  // 主页模板
    filename: 'index.html', // 通过 主页模板  生成   dist\index.html
    // minify: {
    //   collapseWhitespace: true, // html 空格去除
    // },
    // hash: true, // 生成的JS 有hash后缀
  }),
  new ExtractTextPlugin('style.css')
 ],
  module: {
    rules: [
      {
        test: /\.scss|\.css$/,
        use: ExtractTextPlugin.extract({  // 编译 css和scss 文件
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
        // 这两行是处理 react 相关的内容
        {
          test: /\.js$|\.jsx$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
          
            }
          }
        }
    ]
  }
};